<template>
  <div class="fileDateils">
    <!-- <div class="goBack" @click="$emit('goBack')"><i class="el-icon-back"></i>返回上一级</div> -->
    <crumb :list="crumbList" @goBack="$emit('goBack')" @gotoPage="gotoPage" :right="true"></crumb>
    <div class="fristRow">
      <div class="title">{{ infoFrom.fileName }}</div>
      <div class="btn">
        <!-- <div @click="operate(scope.row)"><i class="iconfont icon-bianji"></i>纠错</div> -->
        <div v-if="this.filedInfo?.id" @click="operate()"><i class="iconfont icon-yunduanxiazai"></i>下载</div>
      </div>
    </div>
    <div class="state">
      <div class="params">
        <div class="item">
          <div class="lable">文档类型</div>
          <el-input v-model="infoFrom.fileType1" placeholder="" :disabled="type == 'detail'"></el-input>
        </div>
        <div class="item">
          <div class="lable">所属机构</div>
          <el-input v-model="infoFrom.adm" placeholder="" :disabled="type == 'detail'"></el-input>
        </div>
        <div class="item">
          <div class="lable">上次更新时间</div>
          <el-input v-model="infoFrom.gmtCreated" placeholder="" :disabled="type == 'detail'"></el-input>
        </div>
        <div class="item">
          <div class="lable">解析状态</div>
          <el-input v-model="infoFrom.analysis" placeholder="" :disabled="type == 'detail'"></el-input>
        </div>
      </div>
    </div>
    <div class="fileTable">
      <component :is="filePageName" :info="infoFrom"></component>
    </div>
  </div>
</template>
<script>
import txt from "@/components/priviewFile/txt.vue";
import pdf from "@/components/priviewFile/pdf.vue";
import docx from "@/components/priviewFile/docx.vue";
import xlsx from "@/components/priviewFile/xlsx.vue";
import { downLoad, delay } from "@/utils/index";
import crumb from "@/components/pageInation/crumb.vue";

export default {
  components: { txt, pdf, docx, xlsx, crumb },
  props: {
    type: {
      type: String,
      default: "detail",
    },
    filedInfo: {
      type: Object,
      default: () => ({}),
    },
    crumbList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      infoFrom: {
        fileName: "",
        adm: "",
        analysis: "",
        gmtCreated: "",
      },

      analysisStatusOption: {
        0: "解析成功",
        1: "解析中",
        2: "解析失败",
      },
      filePageName: "",
    };
  },
  mounted() {
    console.log(this.filedInfo, "this.filedInfothis.filedInfothis.filedInfothis.filedInfo");
    this.filePageName = this.filedInfo.fileType;
    // this.infoFrom = { ...this.filedInfo };
    if (this.filedInfo.id) {
      this.infoFrom = { file_url: this.filedInfo.url, ...this.filedInfo, analysis: this.analysisStatusOption[this.filedInfo.analysisStatus] || "" };
      console.log(this.infoFrom, "this.infoFromthis.infoFromthis.infoFromthis.infoFrom");
    }
  },
  methods: {
    operate() {
      downLoad(this.filePageName, this.filedInfo.url);
    },
    gotoPage(item) {
      this.$emit("gotoPage", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.fileDateils {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #e6eaf0;
  z-index: 99;
  .goBack {
    text-align: right;
    cursor: pointer;
  }
  .fristRow {
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    padding: 3px 15px;
    margin: 15px 0px;
    background: #fff;
    border-radius: 8px;
    .btn {
      display: flex;
      > div {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .state {
    background: #fff;
    border-radius: 8px;
    .params {
      display: flex;
      align-items: flex-end;
      text-align: left;
      padding: 10px 20px;
      .item {
        margin-right: 20px;
        .lable {
          // line-height: 30px;
          margin-bottom: 8px;
          margin-left: 3px;
        }
      }
    }
  }
  .fileTable {
    background: #fff;
    margin-top: 15px;
    padding: 20px;
    border-radius: 8px;
    height: calc(100% - 220px);
    box-sizing: border-box;
  }
}
</style>
